<template>
	<view class="tabbar" :style="{ paddingBottom: safeBottom + 'px' }">
		<view class="side left">
			<view class="tab" v-for="t in leftItems" :key="t.text" :class="{ active: t.key === active }" @tap="onTap(t.key)">
				<uni-icons :type="t.icon" :size="24" :color="t.key===active?'#fff':'#dcdcdc'" />
				<text class="text">{{ t.text }}</text>
			</view>
		</view>
		<view class="publish" @tap="$emit('publish')">
			<text>+</text>
		</view>
		<view class="side right">
			<view class="tab" v-for="t in rightItems" :key="t.text" :class="{ active: t.key === active }" @tap="onTap(t.key)">
				<uni-icons :type="t.icon" :size="24" :color="t.key===active?'#fff':'#dcdcdc'" />
				<text class="text">{{ t.text }}</text>
				<view v-if="t.key==='message' && badge>0" class="badge">{{ badge }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
	active: { type: String, default: 'home' },
	badge: { type: Number, default: 3 }
})
const emit = defineEmits(['change','publish'])
const leftItems = [
	{ key:'home', text:'首页', icon:'home' },
	{ key:'friends', text:'朋友', icon:'person' }
]
const rightItems = [
	{ key:'message', text:'消息', icon:'email' },
	{ key:'me', text:'我', icon:'contact' }
]
const safeBottom = (uni.getSystemInfoSync().safeAreaInsets?.bottom) || 0
function onTap(key){ emit('change', key) }
</script>

<style lang="scss" scoped>

.tabbar{
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65));
	display:flex; align-items:flex-end; justify-content:space-between;
	padding: 20rpx 20rpx 18rpx;
	z-index: 10;
}
.side{ flex:1; display:flex; align-items:flex-end; justify-content:space-around; }
.side.left{ padding-right: 60rpx; }
.side.right{ padding-left: 60rpx; }
.tab{ position: relative; min-width: 132rpx; height: 108rpx; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#ddd; font-size: 24rpx; }
.tab.active{ color:#fff; }
.text{ margin-top: 10rpx; font-size: 24rpx; }
.badge{ position:absolute; top: 6rpx; right: 24rpx; min-width: 30rpx; height: 30rpx; padding:0 8rpx; background:#ff3b30; color:#fff; border-radius: 30rpx; font-size: 20rpx; display:flex; align-items:center; justify-content:center; }
.publish{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 20rpx; width: 96rpx; height: 96rpx; border-radius: 50%; background:#000; border: 6rpx solid rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; color:#fff; font-size: 40rpx; font-weight:700; }
</style>


